<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页弹窗</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        body,
        html {
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #app {
            position: relative;
            width: 5.2rem;
            padding: 20px;
        }

        #app>img {
            right: 0;
            width: 20px;
            position: absolute;
        }

        #app .img {
            margin-top: 20px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <img src="../image/home_icon_shutdown.png" alt="" onclick="back()">
        <div>
            <img src="" alt="" class="img" onclick="_jump()">
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    let item, url;
    apiready = function () {
        getArticle(4)
    };

    function getArticle(type) {
        $api.ajax({
            url: 'api/article/list',
            method: 'get',
            data: {
                values: {
                    type: type,
                }
            },
        }, function (ret) {
            item = ret.data.list[0];
            url = item.url
            $api.dom(".img").src = $api.baseUrl + ret.data.list[0].pic_url;
        });
    }
    function _jump() {
        jump(url)
    }
    function back() {
        api.closeFrame({
        });
    }
</script>

</html>